<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="输入标签关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="ID" width="50" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="标签" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="值" min-width="80" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.type===1">
            {{ scope.row.value }}
          </template>
          <img v-else-if="scope.row.type===2" :src="scope.row.value" alt="" class="setting-img" @click="open(scope.row.value)">
          <div v-else v-html="scope.row.value"/>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="备注" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit(row)">
            编辑
          </el-button>
          <!-- <el-button type="danger" size="mini" @click="handleEdit(row)">
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData"/>
    <!-- 弹窗 -->
    <el-dialog title="设置详情" top="5vh" :visible.sync="detailVisible" width="700px" custom-class="detail-dialog" :close-on-click-modal="false" @close="onDetailClose">
      <el-form ref="detailForm" :model="detailForm" :rules="detailFormRules" label-position="left" class="dialog-content" label-width="60px">
        <el-form-item label="标签" prop="name">
          <el-input v-model="detailForm.name"/>
        </el-form-item>
        <el-form-item label="值类型" prop="type">
          <el-select v-model="detailForm.type" @change="detailForm.value=''">
            <el-option v-for="item in settingKeyTypes" :key="item.value" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-if="detailForm.type===1" v-model="detailForm.value" />
          <wish-upload v-else-if="detailForm.type===2" v-model="detailForm.value" path="config" :limit="1" list-type="picture" :show="detailVisible">
            <el-button size="small" type="primary">点击上传</el-button>
          </wish-upload>
          <Tinymce v-else-if="detailForm.type===3" ref="editor" v-model="detailForm.value" :height="300" />
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input v-model="detailForm.description"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDetail('detailForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSettingList, addSetting, editSetting } from '@/api/system'
import { mergeObj, escape2Html } from '@/utils'
import WishUpload from '@/components/Upload'
import Tinymce from '@/components/Tinymce'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { settingKeyTypes } from '@/constant/options'
const form = {
  id: '',
  name: '',
  value: '',
  type: 1,
  description: ''
}
export default {
  name: 'SystemSetting',
  components: { Pagination, Tinymce, WishUpload },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15,
        name: ''
      },
      fileList: [],
      settingKeyTypes,
      total: 10,
      detailVisible: false,
      detailForm: {
        ...form
      },
      detailFormRules: {
        key: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        value: [{ required: true, message: '请输入值', trigger: 'blur' }]
      }

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getSettingList(this.listQuery).then(res => {
        this.list = res.data.data
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleEdit(row) {
      this.isEdit = true
      this.detailForm = mergeObj(this.detailForm, row)
      if (this.detailForm.type === 3) {
        this.detailForm.value = escape2Html(this.detailForm.value)
      }
      this.detailVisible = true
    },
    handleAdd() {
      this.isEdit = false
      this.detailVisible = true
    },
    saveDetail() {
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          this.$confirm('保存后当前设置将立即生效，请认真检查', '确认保存', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            const action = this.isEdit ? editSetting : addSetting
            await action(this.detailForm)
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.detailVisible = false
            this.fetchData()
          }).catch(() => {
          })
        } else {
          console.log('valid fail')
        }
      })
    },
    onDetailClose() {
      this.$refs.detailForm.resetFields()
      this.detailForm = { ...form }
    },
    open(url) {
      window.open(url)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .detail-dialog{
  .el-dialog__body{
    padding: 10px 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}
.setting-img{
  max-width: 200px;
  max-height: 200px;
}
.formitem-inline{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 30px;
  }
}

.formitem-inline2{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 80px;
  }
  // .float-100{
  //   float: left;
  //   width: 100%;
  // }
}
</style>
